<template>
<div class="app-container">
  <loading v-show="loading"></loading>
  <el-card class="box-card searchFormStyle" style="margin-bottom:1%;">
    <div slot="header" class="clearfix">
      <span>参数操作</span>
    </div>
    <div class="text item">
      <el-form ref="searchData" :model="searchData" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="参数类型编码">
              <el-input v-model="searchData.paramTypeCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数类型名称">
              <el-input v-model="searchData.paramTypeName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-button type="primary" 
              icon="el-icon-plus"
              v-if="permissionHandle('parameter:openDialog')"
              @click="openDialog">新 增</el-button>
              <el-button type="primary" 
              icon="el-icon-search" 
              v-if="permissionHandle('parameter:getList')"
              @click="getList">查 询</el-button>
              <el-button type="primary" 
              icon="el-icon-refresh" 
              v-if="permissionHandle('parameter:getList')"
              @click="resetSearch">重 置</el-button>
              <el-button type="info" 
              icon="el-icon-delete" 
              v-if="permissionHandle('parameter:handleDelete')"
              @click="deleteParamsType">删 除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-card>
  <el-card class="box-card" style="margin-bottom:1%;">
    <div slot="header" class="clearfix">
      <span>参数列表</span>
    </div>
    <el-table
      :data="tableData"
      border
      ref="tableData"
      style="width: 100%;margin-bottom:1%;"
      @selection-change="handleSelectionChange"
      >
      <el-table-column
        type="selection"
        width="40">
      </el-table-column>
      <el-table-column
        label="参数类型编码"
        width="180">
        <template slot-scope="scope">
            {{ scope.row.paramTypeCode }}
        </template>
      </el-table-column>
      <el-table-column
        label="参数类型名称"
        width="180">
        <template slot-scope="scope">
            {{ scope.row.paramTypeName }}
        </template>
      </el-table-column>
      <el-table-column
        label="参数类型描述"
      >
        <template slot-scope="scope">
            {{ scope.row.paramTypeDesc }}
        </template>
      </el-table-column>
      <el-table-column
        label="创建日期"
        width="180"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-edit-outline"
            v-if="permissionHandle('parameter:handleEdit')"
            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button
            size="mini"
            icon="el-icon-edit"
            v-if="permissionHandle('parameter:handleConfig')"
            @click="handleAddParam(scope.$index, scope.row)">配置参数</el-button>
          <el-button
            size="mini"
            icon="el-icon-delete"
            type="danger"
            v-if="permissionHandle('parameter:handleDelete')"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" :paginations="paginations"></pagination>
  </el-card>
  <!--新增参数类型-->
  <el-dialog title="新增参数类型" :visible.sync="dialogFormVisible" width="70%">
    <el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px">
      <el-row>
          <el-col :span="12">
            <el-form-item label="参数类型编码" prop="paramTypeCode">
              <el-input v-model="addForm.paramTypeCode" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数类型名称" prop="paramTypeName">
              <el-input v-model="addForm.paramTypeName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="参数描述" prop="paramTypeDesc">
              <el-input v-model="addForm.paramTypeDesc" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button icon="el-icon-refresh" @click="resetForm('addForm')">重置</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="submitForm('addForm')">保存</el-button>
    </div>
  </el-dialog>
  <!--编辑参数-->
  <el-dialog title="配置参数" append-to-body :visible.sync="dialogEditShow" width="70%">
      <span class="demonstration title-span">参数类型基本信息</span>
      <el-row>
          <el-col :span="12" class="detail-col">
              参数类型编码: {{showParameter.paramTypeCode}}
          </el-col>
          <el-col :span="12"  class="detail-col">
              参数类型名称: {{showParameter.paramTypeName}}
          </el-col>
      </el-row>

      <span class="demonstration title-span" style="margin-top:2%;margin-bottom:10px;">新增参数</span>
      <el-form :model="addParameterData" :rules="rules" ref="addParameterData" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="参数名称" prop="paramName">
              <el-input v-model="addParameterData.paramName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="参数值" prop="paramValue">
              <el-input v-model="addParameterData.paramValue" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="参数序号" prop="paramNumber">
              <el-input v-model="addParameterData.paramNumber" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
            <el-form-item>
            <el-button size="mini" icon="el-icon-refresh" @click="resetForm('addParameterData')">重 置</el-button>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="setForm('addParameterData')">保 存</el-button>
            </el-form-item>
          </el-col>
      </el-row>
    </el-form>

    <el-table
      :data="parameterTable"
      height="250"
      border
      style="width: 100%">
      <el-table-column
        prop="paramName"
        label="参数名称"
       >
      </el-table-column>
      <el-table-column
        prop="paramValue"
        label="参数值"
      >
      </el-table-column>
      <el-table-column
        prop="paramNumber"
        label="参数序号">
      </el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="deleteParam(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</div>
</template>
<script>
import Loading from '@/components/loading/loading'
import pagination from '@/components/pagination/index'
import { addParameter, getParameterList, deleteParameter, changeSearch, savaParameter, deleteParam } from '@/api/resource/parameter'
import { isvalidNumber, isvalidRequire, isvalidSpecial } from '@/utils/validate'
// 非空
var validateRequire = (rule, value, callback) => {
  if (!isvalidRequire(value)) {
    callback(new Error('请输入必填项'))
  } else {
    callback()
  }
}
// 特殊字符
var validSpecial = (rule, value, callback) => {
  if (!isvalidSpecial(value)) {
    callback(new Error('数据不能包含特殊字符'))
  } else {
    callback()
  }
}
// 数字验证
var validNumber = (rule, value, callback) => {
  if (!isvalidNumber(value)) {
    callback(new Error('只能输入大于0的数字'))
  } else {
    callback()
  }
}
export default {
  components: {
    Loading,
    pagination
  },
  data() {
    this.permissionHandle = this.$permissionHandle
    return {
      paginations: {
        totalNum: 0,
        currentPage: 1,
        pageSize: 10
      },
      searchData: {
        paramTypeCode: '',
        paramTypeName: '',
        pageSize: '10',
        pageNum: '1'
      },
      loading: false,
      tableData: [],
      // 新增角色数据
      addForm: {
        paramTypeCode: '',
        paramTypeName: '',
        paramTypeDesc: ''
      },
      addParameterData: {
        paramKey: '',
        paramTypeKey: '',
        paramName: '',
        paramValue: '',
        paramNumber: ''
      },
      parameterTable: [],
      deleteDepArry: [],
      dialogFormVisible: false, // 新增弹出框状态
      dialogEditShow: false,
      // 列表所选数据集合
      multipleSelection: [],
      rules: {
        paramTypeCode: [
          { required: true, message: '请输入参数类型编码' },
          { message: '数据不能包含特殊字符', validator: validateRequire },
          { min: 1, max: 31, message: '长度在 1 到 31 个字符', trigger: 'blur' }
        ],
        paramTypeName: [
          { required: true, message: '请输入参数类型名称' },
          { message: '数据不能包含特殊字符', validator: validateRequire },
          { min: 1, max: 85, message: '长度在 1 到 85 个字符', trigger: 'blur' }
        ],
        paramTypeDesc: [
          { message: '数据不能包含特殊字符', validator: validSpecial }
        ],
        paramName: [
          { required: true, message: '请输入参数名称' },
          { message: '数据不能包含特殊字符', validator: validateRequire },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        paramValue: [
          { required: true, message: '请输入参数值' },
          { message: '数据不能包含特殊字符', validator: validateRequire },
          { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
        ],
        paramNumber: [
          { required: true, message: '请输入参数序号' },
          { type: 'number', validator: validNumber }
        ]
      },
      editSearch: {
        paramTypeKey: ''
      },
      deleParams: [],
      showParameter: {
        paramTypeCode: '',
        paramTypeName: '',
        paramTypeDesc: '',
        createTime: ''
      }
    }
  },
  watch: {
    dialogFormVisible: function() {
      if (this.dialogFormVisible === false) {
        this.addForm = {
          paramTypeCode: '',
          paramTypeName: '',
          paramTypeDesc: ''
        }
        this.resetForm('addForm')
      }
    },
    dialogEditShow: function() {
      if (this.dialogEditShow === false) {
        this.addParameterData = {
          paramKey: '',
          paramTypeKey: '',
          paramName: '',
          paramValue: '',
          paramNumber: ''
        }
        this.resetForm('addParameterData')
      }
    }
  },
  created() {
    this.getParamList()
  },
  methods: {
    openDialog() {
      this.dialogFormVisible = true
    },
    // 新增参数类型
    addParameter() {
      this.loading = true
      return new Promise((resolve, reject) => {
        addParameter(this.addForm).then(response => {
          this.loading = false
          this.dialogFormVisible = false
          this.getParamList()
          resolve()
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    getList() {
      this.searchData.pageNum = 1
      this.getParamList()
      this.paginations.currentPage = 1
    },
    // 查询参数
    getParamList() {
      this.loading = true
      return new Promise((resolve, reject) => {
        getParameterList(this.searchData).then(response => {
          this.tableData = response.data.items
          this.paginations.totalNum = parseInt(response.data.itemsTotalCount)
          this.loading = false
          resolve()
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    // 输入参数查询之后
    blurSearch(value) {
      this.getList()
    },
    // 删除
    deleteParamsType() {
      if (this.deleteDepArry.length) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return new Promise((resolve, reject) => {
            deleteParameter({ 'paramTypeKey': JSON.stringify(this.deleteDepArry) }).then(response => {
              resolve()
              this.loading = false
              this.getList()
              this.deleteDepArry = []
            }).catch(error => {
              this.loading = false
              this.deleteDepArry = []
              reject(error)
            })
          })
        }).catch(() => {
          this.deleteDepArry = []
          this.$refs.tableData.clearSelection()
          return
        })
      } else {
        this.$message({
          showClose: true,
          message: '请至少选择一条要删除的数据',
          type: 'warning'
        })
      }
    },
    // 点击参数配置的时候查询基本信息
    editParameter() {
      this.loading = true
      return new Promise((resolve, reject) => {
        changeSearch(this.editSearch).then(response => {
          this.loading = false
          this.showParameter = {
            paramTypeKey: response.data.entity.paramTypeKey,
            paramTypeCode: response.data.entity.paramTypeCode,
            paramTypeName: response.data.entity.paramTypeName,
            paramTypeDesc: response.data.entity.paramTypeDesc,
            createTime: response.data.entity.createTime
          }
          this.parameterTable = response.data.sysParamList
          resolve()
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    // 新增参数
    parameterAdd() {
      this.loading = true
      return new Promise((resolve, reject) => {
        savaParameter(this.addParameterData).then(response => {
          this.loading = false
          this.editParameter()
          this.resetForm('addParameterData')
          resolve()
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    handleAddParam(index, row) {
      this.dialogEditShow = true
      this.editSearch.paramTypeKey = row.paramTypeKey
      this.editParameter()
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true
      this.loading = true
      this.editSearch.paramTypeCode = row.paramTypeCode
      return new Promise((resolve, reject) => {
        getParameterList(this.editSearch).then(response => {
          this.addForm = {
            paramTypeKey: response.data.items[0].paramTypeKey,
            paramTypeCode: response.data.items[0].paramTypeCode,
            paramTypeName: response.data.items[0].paramTypeName,
            paramTypeDesc: response.data.items[0].paramTypeDesc
          }
          this.loading = false
          resolve()
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    handleDelete(index, row) {
      this.$refs.tableData.clearSelection()
      this.deleteDepArry = []
      this.deleteDepArry.push(row.paramTypeKey)
      this.deleteParamsType()
    },
    handleSelectionChange(val) {
      this.deleteDepArry = []
      this.multipleSelection = val
      this.multipleSelection.forEach(element => {
        this.deleteDepArry.push(element.paramTypeKey)
      })
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.getParamList()
    },
    handleCurrentChange(val) {
      this.searchData.pageNum = val
      this.getParamList()
    },
    deleteParam(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.deleParams.push(row.paramKey)
        return new Promise((resolve, reject) => {
          deleteParam({ 'paramKey': JSON.stringify(this.deleParams) }).then(response => {
            resolve()
            // 在获取一次参数
            this.editParameter()
            this.loading = false
          }).catch(error => {
            this.loading = false
            reject(error)
          })
        })
      }).catch(() => {
        return
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addParameter()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    setForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addParameterData.paramTypeKey = this.showParameter.paramTypeKey
          this.parameterAdd()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      if (this.addForm.paramTypeKey) {
        getParameterList(this.editSearch).then(response => {
          this.addForm = {
            paramTypeKey: response.data.items[0].paramTypeKey,
            paramTypeCode: response.data.items[0].paramTypeCode,
            paramTypeName: response.data.items[0].paramTypeName,
            paramTypeDesc: response.data.items[0].paramTypeDesc
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
        this.$refs[formName].resetFields()
      }
      // this.dialogFormVisible = false
    },
    resetSearch() {
      this.searchData.paramTypeCode = ''
      this.searchData.paramTypeName = ''
      this.getParamList()
    }
  }
}
</script>
<style lang="scss">
  .tree-input{
    position: relative;
  }
  .input-tree{
      height:200px;width: 100%;
      .el-scrollbar__wrap{overflow: auto;}
    }
    .detail-col{height:40px;line-height: 40px;}
  .title-span{font-size: 16px;display:inline-block;width:100%;height:40px;line-height:40px;border-bottom:1px solid #e6e6e6}
</style>
